<template>
    <div class="tree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>

        <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
            ref="tree">
        </el-tree>
    </div>
</template>

<script>


export default {
    Data: [
        { id: 1, className: 'A', parentId: null },
        { id: 2, className: 'B', parentId: 1 },
        { id: 3, className: 'C', parentId: 1 },
        { id: 4, className: 'D', parentId: 2 },
        { id: 5, className: 'E', parentId: 2 },
        { id: 6, className: 'F', parentId: 3 },
        { id: 7, className: 'G', parentId: 3 },
        { id: 8, className: 'H', parentId: 4 },
    ],

    data: initTree({ pid: null, pidStr: 'parentId', list: Data }),


    initTree({ pid, pidStr, list }) {
        const child = list.filter(item => item[pidStsr] == pid);
        console.log('child', child);
        return child.map(item => {
            if (initTree({ pid: item.id, pidStr, list }).length > 0) {
                return {
                    ...item,
                    payType: [1],
                    label: item.className,
                    value: item.id,
                    children: initTree({ pid: item.id, pidStr, list }),
                    disabled: true
                }
            } else {
                return {
                    ...item,
                    payType: [1],
                    label: item.className,
                    value: item.id,
                    disabled: false
                };
            }
        })


    }
};
</script>
